<template>
	<div class="front">
		<div class="widgets bg-white">
			<div class="left">
				<el-input v-model="searchText" placeholder="输入搜索内容" class="search__input" @keyup.enter.native="search"></el-input>
				<el-button type="primary" @click="search">查询</el-button>
			</div>
			<div class="btn-group right">
				<el-button type="info" @click="refresh">刷新</el-button>
				<el-button type="primary" @click="add">新增</el-button>
				<el-button type="danger" v-if="multipleSelection.length <= 0" disabled>删除</el-button>
				<el-button type="danger" v-else>删除</el-button>
				<el-button type="danger" v-if="multipleSelection.length <= 0" disabled>禁用</el-button>
				<el-button type="danger" v-else @click="disabedBtn(0, '禁用')">禁用</el-button>
				<el-button type="success" v-if="multipleSelection.length <= 0" disabled>启用</el-button>
				<el-button type="success" v-else @click="disabedBtn(1, '启用')">启用</el-button>
				<el-button type="success" disabled>备份</el-button>
				<el-button type="success" disabled>恢复</el-button>
				<el-button type="success" v-if="multipleSelection.length != 1" disabled>查看</el-button>
				<el-button type="success" v-else @click="checkAccoutSet">查看</el-button>
				<el-button type="success" v-if="multipleSelection.length != 1" disabled>修改</el-button>
				<el-button type="success" v-else @click="update">修改</el-button>
				<el-button type="danger" @click="close">关闭</el-button>
				<el-button-group class="btn-other">
	                <el-button title="导出">
	                    <img src="../../../assets/images/export.png" alt="">
	                </el-button>                     
	                <el-button title="打印">
	                    <img src="../../../assets/images/print.png" alt="">
	                </el-button>
	                <el-button title="帮助">
	                    <img src="../../../assets/images/help.png" alt="">
	                </el-button>
	            </el-button-group>
			</div>
		</div>
		<!-- 表格 -->
		<div class="table bg-white bj">
			<el-scrollbar style="height: 100%;">
				<el-table :data="tableData" border ref="table" @selection-change="selectionChange" style="width: 100%;" @row-dblclick="dblClick">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column label="当前账套" align="center">
						<template slot-scope="scope">
	                        <span class="currentAccount" v-if="scope.row.id == systemId"></span>
	                    </template>
					</el-table-column>
					<el-table-column label="账套名" :show-overflow-tooltip="true" property="accountSet" align="center"></el-table-column>
					<el-table-column label="公司名称" :show-overflow-tooltip="true" property="companyNameChinese" align="center"></el-table-column>
					<el-table-column label="行业" :show-overflow-tooltip="true" property="industry" align="center"></el-table-column>
					<el-table-column label="地址" :show-overflow-tooltip="true" width="300" align="center">
						<template slot-scope="scope">
	                        <span>{{ (scope.row.proviceName || scope.row.cityName || scope.row.areaName || scope.row. addressChinese) ? scope.row.proviceName + scope.row.cityName + scope.row.areaName + scope.row. addressChinese : '' }}</span>
	                    </template>
					</el-table-column>
					<el-table-column label="启用年度" align="center">
						<template slot-scope="scope">
	                        {{ scope.row.createTime | formatDate('year') }}
	                    </template>
					</el-table-column>
					<el-table-column label="启用月份" align="center">
						<template slot-scope="scope">
	                        {{ scope.row.createTime | formatDate('month') }}
	                    </template>
					</el-table-column>
					<el-table-column label="电话" property="phone" align="center"></el-table-column>
					<el-table-column label="邮箱" property="email" align="center"></el-table-column>
					<el-table-column label="状态" property="state" align="center">
						<template slot-scope="scope">
	                        <span style="color: green;" v-if="scope.row.state == 1">已启用</span>
	                        <span style="color: red;" v-if="scope.row.state == 0">已禁用</span>
	                    </template>
					</el-table-column>
				</el-table>
			</el-scrollbar>
		</div>
	</div>
</template>
<script>
/*
*  author: 'iissoftware'
*  description: 账套列表组件
*/
export default {
	data() {
		return {
			searchText: '',
			tableData: this.$store.state.accountStore.tableData,
			systemId: this.$store.state.systemId,
			multipleSelection: [],
			selectRowId: []
		}
	},
	watch: {
        searchText(newVal) {
            if(!newVal) {
                this.$store.dispatch('accountStore/getAccountList', this.$url + 'systemParameters/selectAccountSets');          //获取账套列表数据
            }
        }
	},
	methods: {
		search() {			//搜索
            if(this.searchText) {
                let newArr = [],
                    data = this.tableData;
                let reg = new RegExp(this.searchText, "g");
                data.forEach(item => {
                    if((item['accountSet'] && reg.test(item['accountSet'])) || (item['accountSetToPinYin'] && reg.test(item['accountSetToPinYin'])) || (item['companyNameChinese'] && reg.test(item['companyNameChinese'])) || (item['companyNameChineseToPinYin'] && reg.test(item['companyNameChineseToPinYin'])) || (item['industryName'] && reg.test(item['industryName'])) || (item['industryNameToPinYin'] && reg.test(item['industryNameToPinYin'])) || (item['email'] && reg.test(item['email'])) || (item['phone'] && reg.test(item['phone'])) || (item['countryName'] && reg.test(item['countryName'])) || (item['proviceName'] && reg.test(item['proviceName'])) || (item['cityName'] && reg.test(item['cityName'])) || (item['areaName'] && reg.test(item['areaName'])) || (item['addressChinese'] && reg.test(item['addressChinese']))) {
                        newArr.push(item);
                    }
                });
                // this.tableData = newArr;
                this.$store.commit('accountStore/updateTableData', newArr);
            }
		},
		refresh() {
			const loading = this.$loading({
                lock: true,
                text: '数据刷新中...',
                spinner: 'el-icon-loading',
                background: '#fff'
            });
            setTimeout(() => {
                loading.close();
            }, 1000);
		},
		dblClick(row) {			//双击查看账套信息
			this.$store.commit('accountStore/updateActiveName', 'first');
			this.$store.commit('accountStore/updateStatus', 1);
			this.$store.commit('accountStore/updateAccountSetId', row['id']);			//保存当前账套id
		},
		selectionChange(arr) {		//表格行选中
			this.multipleSelection = arr;
            this.selectRowId = [];
            for(var i = 0; i < this.multipleSelection.length; i++) {
                this.selectRowId.push(this.multipleSelection[i]['id']);
            }
		},
		checkAccoutSet() {				//查看账套
			this.$store.commit('accountStore/updateActiveName', 'first');
			this.$store.commit('accountStore/updateStatus', 1);
			this.$store.commit('accountStore/updateAccountSetId', this.selectRowId[0]);			//保存当前账套id
		},
		add() {		//新增账套
			this.$store.commit('accountStore/updateActiveName', 'first');
			this.$store.commit('accountStore/updateStatus', 4);
		},
		update() {		//修改账套
			this.$store.commit('accountStore/updateActiveName', 'first');
			this.$store.commit('accountStore/updateStatus', 5);
			this.$store.commit('accountStore/updateAccountSetId', this.selectRowId[0]);			//保存当前账套id
		},
		disabedBtn(status, msg) {           //禁用、启用
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            if(status == 0) {
                for(var i = 0; i < this.multipleSelection.length; i++) {
                    if(this.multipleSelection[i]['state'] == status) {
                        this.$alert('禁用失败，其中包含已禁用选项，重新选择！', '禁用提示', {
                            confirmButtonText: '确定'
                        });
                        return false;
                    }
                }
            } else if(status == 1) {
                for(var i = 0; i < this.multipleSelection.length; i++) {
                    if(this.multipleSelection[i]['state'] == status) {
                        this.$alert('启动失败，其中包含已启动选项，重新选择！', '启动提示', {
                            confirmButtonText: '确定'
                        });
                        return false;
                    }
                }
            }
            this.$http.post(this.$url + 'systemParameters/updateAccountSetState?state=' + status, JSON.stringify(this.selectRowId), type).then(res => {
                if(res.data.code == 20001) {
                    this.$message({message: msg + '成功', type: 'success', duration: 2000});
                    setTimeout(() => {
                        this.$store.dispatch('accountStore/getAccountList', this.$url + 'systemParameters/selectAccountSets');          //获取账套列表数据
                    }, 1000);
                } else {
                    this.$message.error(this.data.msg);
                }
            });
		},
		close() {
			let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
            parent.layer.close(index);
		}
	},
	filters: {
		formatDate(val, text) {			//格式化输出日期
			if(text === 'year') {
				return new Date().getFullYear();
			} else if(text === 'month') {
				return new Date().getMonth() + 1;
			}
		}
	},
	created() {
		this.$nextTick(() => {
			this.$store.dispatch('accountStore/getAccountList', this.$url + 'systemParameters/selectAccountSets');          //获取账套列表数据
		});
	}
}
</script>
<style scoped>
	.front {overflow-y: hidden;overflow-x: auto;}
	.widgets, .table {min-width: 1200px;}
	.currentAccount {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #f00;}
	.table {height: calc(100% - 54px);}
</style>